<template>
    <div class="ccc">
        <div class="tips">{{ t("订单取消后无法恢复！") }}</div>
        <div class="list">
            <span class="item" :select="item.select" v-for="(item, index) in reason_list" :key="index" @click="item_click(item)">
                {{ item.cause }}
            </span>
        </div>
        <el-button class="submit" type="text" @click="submit()">{{ $t("我的订单.提交") }}</el-button>
    </div>
</template>
<script>
import { 
    getCancelOrderCause 
} from "@/utils/api.js";
export default {
    props: ['order'],
    data() {
        return {
            reason_list: []
        }
    },
    mounted() {
        getCancelOrderCause().then(res => {
            if (res.code == 1) {
                this.reason_list = res.data;
            }
        });
    },
    methods: {
        /**
        * 简化翻译方法(少写property)
        * @param {String} v 最后一个key值
        */
        t(v) {
            return this.$t(`我的订单.${v}`);
        },
        item_click(item) {
            let lastItem = this.reason_list.find(e => e['select'] == true);
            if (lastItem) {
                lastItem['select'] = false;
            }
            item['select'] = !item['select'];
            this.$forceUpdate();
        },
        submit() {
            let item = this.reason_list.find(e => e['select'] == true);
            if (!item) {
                this.$message.error(this.t("请选择退款原因"));
                return;
            }
            this.$emit("cancelReason", {order: this.order, reason: item});
        }
    },
}
</script>
<style lang="less" scoped>

    .ccc {
        display: flex;
        flex-direction: column;

        .tips {
            padding: 12px 21px;
            background: rgba(255, 0, 0, 0.1);
            color: #FF0000;
        }

        .list {
            margin-top: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;

            .item {
                padding: 20px 0px;
                width: 48%;
                margin-bottom: 20px;
                text-align: center;
                background: #F1F1F1;
                color: #999;
                font-size: 16px;
                font-weight: 400;
                border-radius: #F1F1F1;
                border-radius: 10px;
                box-sizing: border-box;
                cursor: pointer;
                user-select: none;
            }

            .item[select] {
                background: #fff;
                color: #FF5757;
                border: 1px solid #FF5757;
            }
        }

        .submit {
            align-self: center;
            background: #FF5757;
            color: #fff;
            width: 270px;
            border-radius: 10px;
            padding: 20px 0px;
        }
    }
</style>